﻿import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

ItemDelegate {
    property point beginPoint
    property bool caught: false
    // Drag Data
    property int dType: mtype

    id: delegate
    width: 100
    height: 100

    // QML DRAG REF: https://blog.csdn.net/qq_36685813/article/details/102787140

    // 拖动状态
    Drag.active: delegateMouseArea.drag.active
    // 拖动类型：内部组件拖放
    // Drag.Automatic BUG：图标拖动时不能显示 fixed by：qt 5.6.1
    Drag.dragType: Drag.Internal
    // 鼠标拖动时位于控件的位置
    Drag.hotSpot.x: (delegate.width)*0.5
    Drag.hotSpot.y: (delegate.height)*0.5

    function add(model) {
        model.append(appName, appIcon)
    }

    MouseArea {
        id: delegateMouseArea
        anchors.fill: parent
        // 拖动目标：保存要拖动的对象
        drag.target: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onPressed: {
            // 记录初始位置
            beginPoint = Qt.point(delegate.x, delegate.y)
        }
        onReleased: {
            // 若已被标记为捕获
            if (caught) {
                appModel.remove(index)
            } else {
                // 未捕获则使用弹跳效果回归原位
                backAnimX.from = delegate.x
                backAnimX.to = beginPoint.x
                backAnimY.from = delegate.y
                backAnimY.to = beginPoint.y
                backAnim.start()
            }
        }
        onClicked: {
            // 右键弹出菜单
            if (mouse.button == Qt.RightButton) {
                popMenu.popup()
            }
        }
        onDoubleClicked: {
            // 标记上一次打开状态
            if (delegate.state == "unselected")
                delegate.state = "selected"
            else if (delegate.state == "selected")
                delegate.state = "unselected"
        }
        Menu {
            id: popMenu
            MenuItem {
                text: "DELETE"
                onTriggered: {
                    console.log("Del" + index + " " + appName)
                    appModel.remove(index)
                }
            }
            MenuItem {
                text: "EDIT"
                onTriggered: {
                    console.log("Edit" + index)
                    // TODO
                }
            }
        }
        ParallelAnimation {
            id: backAnim
            SpringAnimation { id: backAnimX; target: delegate; property: "x"; duration: 500; spring: 2; damping: 0.2 }
            SpringAnimation { id: backAnimY; target: delegate; property: "y"; duration: 500; spring: 2; damping: 0.2 }
        }
    }

    contentItem: ColumnLayout {
        id: delegateItem
        Rectangle {
            id: itemIcon
            width: 80
            height: 80
            radius: 5
            color: "white"
            smooth: true
            border.color: "red"
            Image {
                id: iconImg
                width: parent.width
                height: parent.height
                fillMode: Image.Stretch
                // TODO
                source: appIcon
            }
        }
        Label {
            id: itemName
            text: appName
            font.bold: true
            font.pixelSize: 14
            horizontalAlignment: Text.AlignHCenter
            Layout.fillWidth: true
            elide: "ElideRight"
        }
    }

    state: "unselected"
    states: [
        State {
            name: "unselected"
            PropertyChanges { target: itemIcon; border.color: "white"; border.width: 0 }
        },
        State {
            name: "selected"
            PropertyChanges { target: itemIcon; border.color: "aqua"; border.width: 2 }
        }
    ]
    transitions: [
        Transition {
            from: "unselected"
            to: "selected"
            reversible: true
            NumberAnimation { properties: "border.width"; easing.type: Easing.InOutQuad; duration: 1000 }
            ColorAnimation { duration: 1000 }
        }
    ]

}
